<template>
   <div class="gallery-container" @click="handleGalleryClick">
      <div class="img-wrapper">
         <swiper :options="swiperOption">
            <!-- slides -->
            <swiper-slide v-for="(item, index) of imgsList" :key="index">
                <img class="gallery-img swiper-img" :src='item' alt=''>
            </swiper-slide>
            <!-- Optional controls -->
            <div class='swiper-pagination' slot='pagination'></div>
         </swiper>
      </div>
   </div>
</template>

<script>
export default {
  name: 'CommonGallery',
  props: {
    imgsList: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data: function () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        paginationType: 'fraction',
        observer: true,
        observeParents: true
      }
    }
  },
  methods: {
    handleGalleryClick: function () {
      this.$emit('closeGallery', false)
    }
  }
}
</script>

<style lang='stylus' scoped>
  div{
    display: flex;
  }
  .gallery-container >>> .swiper-container{
     overflow: visible;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
  }
  .gallery-container{
    flex-direction: column;
    justify-content: center;
    position:fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
  }
  .gallery-container .img-wrapper{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 65%;
    color: #fff;
  }
  .gallery-container .img-wrapper .gallery-img{
    width: 100%;
  }
  .gallery-container .img-wrapper .swiper-pagination{
    bottom: -0.5rem;
    justify-content: center;
  }
</style>
